/*------- 订单样式 ------- begin*/
.order-page {
  border: 0;
  padding-bottom: 20px;
  .order-wrap {
    padding: 10px 10px;
    padding-right: 5px;
  }
  .wrap_content {
    box-shadow: 0 0 5px #ccc;
    background-color: #fff;
    margin-bottom: 10px;
    .survey {
      padding: 5px;
      font-size: 15px;
      font-weight: 700;
      color: #333333;
      background-color: #eaeaea;
    }
    .content_box {
      padding: 5px 10px;
      .code {
        font-weight: bold;
      }
      .text {
        color: red;
      }
      .color {
        color: #63c2d9;
      }
      .WAIT_PENDING {
        color: #ff5740;
      }
      .WAIT_SEND {
        color: #ff9f24;
      }
      .WAIT_RECEIVE {
        color: #23bcca;
      }
      .FINISH {
        color: rgb(49, 163, 83);
      }
      .CANCEL {
        color: #999;
      }
    }
    //   订单跟踪
    .after {
      margin-top: 5px;
      padding: 5px;
      .box {
        padding: 5px;
        background-color: #fff;
        overflow: auto;
      }
    }
    //商品清单
    .wrap_detail_list {
      padding: 5px 0;
      .titleArea {
        padding-bottom: 5px;
        margin: 0 5px;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid #0076f6;
      }
      .footArea {
        margin: 0 20px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid #f2f2f2;
      }

      .detail_list_box {
        min-height: 40px;
        display: flex;
        align-items: center;
        border-top: 1px solid #d4e8fe;
        border-bottom: 1px solid #d4e8fe;
        margin-top: 10px;
        font-size: 10px;
        padding: 5px 0px;
        box-sizing: border-box;
        background-color: rgb(247, 251, 255);
        .type {
          display: flex;
          justify-content: center;
          align-items: center;
          .type_text {
            width: 157px;
            font-size: 14px;
            color: #999999;
            line-height: normal;
          }
        }
        .imgArea {
          display: flex;
        }
        .detail_list_box_text {
          margin-left: 10px;
          font-size: 14px;
          color: #666666;
          text-align: left;
          width: 200px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .m_l {
          padding-left: 5px;
        }
        .img_box {
          width: 20px;
          height: 20px;
          ::v-deep .image-slot {
            font-size: 18px;
            color: #666;
          }
        }
        .price {
          color: #ff371f;
          text-align: center;
        }
        .partial-cancel-number {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    // 发货单
    .order_send {
      padding: 5px 10px;
      .order_send_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        line-height: 25px;
        &.head {
          border-bottom: 1px solid #0076f6;
        }
        &.odd {
          background-color: #f5f5f5;
        }
        > div {
          width: 200px;
          text-align: center;
          &.send_code,
          &.goods_name {
            width: 500px;
            text-align: left;
            padding-left: 5px;
            width: 500px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &.send_code {
            text-align: left;
            padding-left: 5px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
  .reminder {
    background-color: #fff8f2;
    border-radius: 5px;
    font-size: 8px;
    margin-bottom: 5px;
    color: #ff943d;
    padding: 5px 0;
  }
  .unit-price {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .origin-price {
      color: #999999;
    }
    .current-price {
      color: #ff371f;
    }
    .unit {
      line-height: 40px;
    }
  }

  .order_active {
    color: #ff371f;
    font-size: 14px;
    .order_active_label {
      color: #333;
    }
  }
  .text_center {
    text-align: center;
  }
  .footer_remark {
    margin: 5px 20px;
    display: flex;
    justify-content: space-between;
    .right_item {
      display: flex;
      margin-top: 5px;
      justify-content: space-between;
      > span {
        display: inline-block;
        text-align: right;
        min-width: 120px;
      }
      > p {
        min-width: 100px;
        text-align: right;
      }
      .order_price {
        font-weight: 600;
        color: #333;
      }
    }
  }
}

/*------- 订单样式 ------- end*/
/*------- 活动样式 ------- begin*/
.active_list {
  margin: 10px 10px 0;
  display: grid;
  grid: 80px / auto auto auto;
  grid-column: span 3;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  .active_item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    & + .active_item {
      margin-top: 5px;
    }
  }
  .active_icon {
    margin-left: 8px;
    cursor: pointer;
    color: var(--info);
  }
  .active_list_item {
    border: 1px solid #eee;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    &:hover {
      box-shadow: 0 0 9px #eee;
    }
    &.active {
      // border-color: var(--primary);
      box-shadow: 0 0 5px var(--primary);
    }
  }
}
.active_list_content {
  flex: 1;
  overflow: auto;
  .product_list {
    display: flex;
    align-items: center;
  }
  .active_img {
    margin: 0 5px;
    width: 20px;
    height: 20px;
  }
}

// tooltip 中样式
.active_item_box {
  margin: 0 10px;
  color: #666;
  .active_item {
    padding: 5px 0;
    & + .active_item {
      border-top: 1px dashed #444;
    }
    & > span:nth-child(2) {
      font-size: 14px;
    }
  }
  .active_name {
    color: var(--primary);
    font-weight: bold;
  }
  .active_time {
    color: var(--white);
  }
  .active_icon {
    cursor: pointer;
    font-size: 16px;
    color: var(--primary);
  }
  .ac_label {
    margin: 0 5px;
    font-size: 16px;
    color: var(--warning);
  }
  .ac_label2 {
    margin: 0 5px;
    font-size: 16px;
    color: var(--danger);
  }
}
/*------- 活动样式 ------- end*/

/*------- 底部 ------- begin*/
$footerHeight: 32px;
.my_footer {
  position: fixed;
  background: #fff;
  width: 100%;
  height: $footerHeight;
  bottom: 3px;
  left: $left-nav-width;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding-right: $left-nav-width;
  box-sizing: border-box;
  box-shadow: 0 -1px 5px #eee;
  .btn_box {
    display: flex;
    .cancel,
    .reject {
      background-color: var(--delete);
      color: #fff;
    }
    .text {
      background-color: #5372e7;
      color: #fff;
    }
    .sure-cancel {
      background-color: #67c23a;
      color: #fff;
    }
    .submit,
    .receive {
      background-color: var(--submit);
      color: #fff;
    }
    .aduit {
      background-color: var(--green);
      color: #fff;
    }
    .afterSale {
      background-color: #ff9f24;
      color: #fff;
    }
    .bugAgain {
      background-color: var(--other);
      color: #fff;
    }
    .settlement {
      background-color: #ff4400;
      color: #fff;
      &.disable {
        opacity: 0.7;
      }
    }
  }
  .btn_item {
    margin-right: 20px;
    min-width: fit-content;
    width: 120px;
    text-align: center;
    line-height: $footerHeight;
    font-size: 13px;
    color: #fff;
    background: var(--primary);
    &:hover {
      cursor: pointer;
    }
  }
}
/*------- 底部 ------- end*/
/*------- 时间 ------- begin*/
.send_time_box {
  display: flex;
  align-items: center;
  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
  }
  .send_time_icon {
    margin-right: 4px;
    color: #ff4400;
  }
  .time_select {
    width: 120px;
    .el-input__inner {
      border-radius: 4px 0 0 4px;
      -webkit-border-radius: 4px 0 0 4px;
      -moz-border-radius: 4px 0 0 4px;
      -ms-border-radius: 4px 0 0 4px;
      -o-border-radius: 4px 0 0 4px;
    }
  }
  .date-picker {
    width: 280px;
    // padding: 0 10px;
    border-radius: 0 4px 4px 0;
    ::v-deep .el-input__inner {
      border-radius: 0 4px 4px 0;
      border-left-color: transparent;
    }
    border-left-color: transparent;
  }
}
/*------- 时间 ------- end*/
